/*
 * @Description: 用户列表组件
 * @Author: 姚泽毅
 * @Date: 2021-08-29 16:31:07
 * @LastEditTime: 2021-08-29 16:54:23
 */
import { Card } from 'antd'
import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import "./index.css"
const { Meta } = Card;

export default class List extends Component {
    state = {
        users: [],
        isFirstLoad: true,
        isLoading: false,
        isErr: ""
    }

    componentDidMount() {
        this.token = PubSub.subscribe("changeState", (_, stateObj) => {
            this.setState(stateObj)
        })
    }

    componentWillUnmount() {
        PubSub.unsubscribe(this.token)
    }

    render() {
        const { users, isFirstLoad, isLoading, isErr } = this.state
        return (
            <div className="list">
                {
                    isFirstLoad ? <h2>输入关键词后，回车或点击搜索按钮进行搜索GitHub用户</h2> :
                        isLoading ? <h2>Loading........</h2> :
                            isErr ? <h2 style={{ color: "red" }}>{isErr}</h2> :
                                users.length === 0 ? <h2>没有查询到当前用户</h2> :
                                    users.map(user => {
                                        return (
                                            <Card
                                                key={user.id}
                                                hoverable
                                                style={{ width: 240 }}
                                                cover={<img alt="avatar" src={user.avatar_url} />}
                                            >
                                                <Meta title={user.login} description={user.html_url} />
                                            </Card>
                                        )
                                    })
                }
            </div>
        )
    }
}
